<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 任务调度</el-breadcrumb-item>
                <el-breadcrumb-item>任务调度频率</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="2">
                    <el-button type="primary" @click="openNew">新建</el-button>
                </el-col>
                <el-col :span="3" class="ml10">
                    <span>任务调度频率：</span>
                </el-col>   
                <el-col :span="4">
                    <el-input v-model="searchKey"></el-input>
                </el-col>  
                <el-col :span="2" :offset="5">
                    <span>状态：</span>
                </el-col>
                <el-col :span="2">
                    <el-select placeholder="请选择" v-model="searchStatus" clearable>
                        <el-option key="0" label="OPEN" value="0"></el-option>
                        <el-option key="1" label="CLOSE" value="1"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1" class="ml10">
                    <el-button @click="findList">查找</el-button>
                </el-col>
                <a :href="exportUrl" class="r exportLink"  target="_blank" :style="{background:maincolor||'#5a6775'}">导出</a>
            </el-row>
            <el-table
                ref="multipleTable"
                :data="taskList"
                border
                v-loading="loading"
                style="width: 100%; margin-top:20px">
                <el-table-column
                    type="index"
                    label="序号"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="任务调度频率">
                </el-table-column>
                <el-table-column
                    prop="dayInfo"
                    label="指定天数">
                </el-table-column>
                <el-table-column
                    prop="weekdayName"
                    label="星期">
                </el-table-column>
                <el-table-column
                    prop="rate"
                    label="频率">
                </el-table-column>
                <el-table-column
                    prop="unitName"
                    label="频率单位">
                </el-table-column>
                <el-table-column
                    prop="statusName"
                    label="状态">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <a @click="editTask(scope.row)" class="mr15">编辑</a>
                        <a @click="delTask(scope.row)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_container">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="threadNum"
                    layout="total, prev, pager, next, jumper"
                    :total="totleNum">
                </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
            >
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>任务调度频率描述：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="title"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6" :offset="2">
                        <el-radio v-model="scheduleType" label="0">计划</el-radio>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="2" :offset="2">
                        <span>星期：</span>
                    </el-col>
                    <el-col :span="8">
                        <el-select placeholder="请选择" v-model="weekday" clearable>
                            <el-option
                                v-for="item in weekdayValue"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="2" :offset="2"><span>频率：</span></el-col>
                    <el-col :span="8"><el-input v-model="rate" type="number"></el-input></el-col>
                    <el-col :span="4"><span>频率单位：</span></el-col>
                    <el-col :span="4">
                        <el-select placeholder="请选择" v-model="unit" clearable>
                            <el-option
                                v-for="item in unitValue"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6" :offset="2">
                        <el-radio v-model="scheduleType" label="1">指定天</el-radio>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="8" :offset="2">
                        <el-select placeholder="请选择" v-model="dayInfo" clearable>
                            <el-option
                                v-for="item in dayInfoValue"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6" :offset="2">
                        <el-radio v-model="scheduleType" label="2">执行一次</el-radio>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleCreate" :loading="btnloading">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import utils from '../../utils/index.js'
export default {
    data() {
        return {
            exportUrl:"",
            btnloading: false,
            loading: false,
            dialogTitle:"新增任务调度频率",
            unitValue: [{
                label:"分钟",
                value:0
            },{
                label:"小时",
                value:1
            },{
                label:"天",
                value:2
            },{
                label:"周",
                value:3
            },{
                label:"月",
                value:4
            },{
                label:"季度",
                value:5
            },{
                label:"年",
                value:6
            }],
            weekdayValue:[{
                label:"星期天",
                value:1
            },{
                label:"星期一",
                value:2
            },{
                label:"星期二",
                value:3
            },{
                label:"星期三",
                value:4
            },{
                label:"星期四",
                value:5
            },{
                label:"星期五",
                value:6
            },{
                label:"星期六",
                value:7
            }],
            dayInfoValue:[{
                label:"月初第一天",
                value:0
            },{
                label:"月末最后一天",
                value:1
            },{
                label:"年初第一天",
                value:2
            },{
                label:"年末最后一天",
                value:3
            },{
                label:"季末最后一天",
                value:5
            }],
            currentPage:1,
            rowId:"",
            searchKey:"",
            searchStatus:"",
            //所需要参数
            dialogVisible: false,
            scheduleType:"0",
            dayInfo:"",
            title:"",
            unit:"",
            rate:"",
            weekday:"",
            threadNum: parseInt(localStorage.getItem('pagesize'))
        }
    },
    mounted() {
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
        this.getList();
        this.exportUrl = utils.apiUrl + '/export/schedule?sessionId=' + localStorage.getItem('sessionId') + '&searchKey=' + this.searchKey + '&status=' + this.searchStatus;
    },
    computed: mapState({
        msg: state => state.task.msg,
        flag: state => state.task.flag,
        taskList: state => state.task.taskList,
        totleNum: state => state.task.totleNum,
        maincolor: state => state.system.colors
    }),
    methods:{
        getColor() {
            this.$store.dispatch("getColor", {
                sessionId: localStorage.getItem('sessionId')
            })
        },
        getList() {
            this.loading = true;
            this.$store.dispatch('getTaskList',{
                pageNo: 1,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            }).then(() => {
                if(this.msg !== '成功') {
                    this.loading = false;
                    this.$message(this.msg)
                }else{
                    this.loading = false;
                }
            })
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.$store.dispatch('getTaskList',{
                pageNo: val,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            }).then(() => {
                this.loading = false;
            })
        },
        openNew() {
            this.dialogTitle = "新增任务调度频率";
            this.rowId = "";
            this.dialogVisible = true;
            this.rowId = "";
            this.dayInfo = "";
            this.rate = "";
            this.scheduleType = "";
            this.title = "";
            this.unit = "";
            this.weekday = "";
        },
        editTask(row) {
            this.dialogTitle = "编辑任务调度频率";
            this.dialogVisible = true;
            this.rowId = row.rowId;
            this.dayInfo = row.dayInfo;
            this.rate = row.rate;
            this.scheduleType = row.scheduleType.toString();
            this.title = row.title;
            this.unit = row.unit;
            this.weekday = row.weekday;
        },
        handleCreate() {
            var params = {
                dayInfo: this.dayInfo,
                rate: this.rate,
                scheduleType: this.scheduleType,
                title: this.title,
                unit: this.unit,
                weekday: this.weekday,
                sessionId: localStorage.getItem('sessionId')
            }
            if(params.title == "") {
                this.$message("任务调度频率描述不能为空");
            }else{
                this.btnloading = true;
                if(this.rowId.length > 0) {
                    params.rowId = this.rowId;
                    this.$store.dispatch('editTaskFre',params).then(() => {
                        if(this.flag == 0) {
                            this.btnloading = false;
                            this.dialogVisible = false;
                            this.$message(this.msg);
                            this.getList();
                        }else{
                            this.btnloading = false;
                            this.$message(this.msg);
                        }
                    })
                }else{
                    this.btnloading = true;
                    this.$store.dispatch('createTaskFre',params).then(() => {
                        if(this.flag == 0) {
                            this.btnloading = false;
                            this.dialogVisible = false;
                            this.$message(this.msg);
                            this.getList();
                        }else{
                            this.btnloading = false;
                            this.$message(this.msg);
                        }
                    })
                }  
            }
             
        },
        findList() {
            this.loading = true;
            this.$store.dispatch('getTaskList',{
                searchKey: this.searchKey,
                status: parseInt(this.searchStatus),
                pageNo: 1,
                pageSize: this.threadNum,
                sessionId: localStorage.getItem('sessionId'),
            }).then(() => {
                this.loading = false;
                this.exportUrl = utils.apiUrl + '/export/schedule?sessionId=' + localStorage.getItem('sessionId') + '&searchKey=' + this.searchKey + '&status=' + this.searchStatus;
            })
        },
        delTask(row) {
            this.$confirm('确定删除？','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('delTaskFre',{
                        rowId: row.rowId,
                        sessionId: localStorage.getItem('sessionId')
                    }).then(() => {
                        this.$message(this.msg);
                        this.getList();
                    })
                }).catch(() => {
                    this.$message('已取消删除');
                })
        },
    }
}
</script>
<style>
.el-button+.el-button{
    margin-left:0;
}
input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>


